﻿/*
* jQuery.fn.imageZoom( options );
*
* Turns a simple image to a super sweet zoomable image
*
* $('.element').imageZoom({
*     small: 'the small image to show',
*     original: 'The image we show when over',
*     viewpoint: {
*         width: 'width of viewpoint',
*         height: 'height of viewpoint'
*     }
* });
*
* Version 0.2.2
* www.labs.skengdon.com/imageZoom
* www.labs.skengdon.com/imageZoom/js/imageZoom.min.js
*/
; (function ($) {
    $.fn.imageZoom = function (options) {
        var settings = {
            viewpoint: {
                width: 150,
                height: 100
            }
        };
        $.extend(true, settings, options);
        return this.each(function () {
            var $loader = document.createElement('div');
            $(this).append($loader);

            var $image = document.createElement('img');
            $(this).append($image);

            var $viewpoint = document.createElement('div');
            $(this).append($viewpoint);

            var $loader = $($loader);
            var $image = $($image);
            var $viewpoint = $($viewpoint);
            var $viewpointImage = new Image;

            var pos = ($(this).css('position') == 'static') ? 'relative' : $(this).css('position');
            $(this).css({
                position: pos,
                overflow: 'hidden'
            });

            $loader.addClass('imageZoom_loading');
            $loader.text('Loading...');
            $loader.css({
                'margin': '100px',
                'padding': '30px 70px',
                'text-align': 'center',
                'background': '#222',

                'border-radius': '10px',
                '-o-border-radius': '10px',
                '-moz-border-radius': '10px',
                '-webkit-border-radius': '10px'
            });

            $image.attr('src', settings.small);
            $image.css({
                width: $(this).width()
            });

            $viewpointImage.src = settings.original;
            $viewpoint.addClass('imageZoom_viewpoint');
            $viewpoint.css({
                width: settings.viewpoint.width,
                height: settings.viewpoint.height,
                display: 'none',
                position: 'absolute',
                background: 'url(' + $viewpointImage.src + ') 0 0 no-repeat',
                'border': '1px solid #222',
                'box-shadow': '0 0 20px #000',
                '-o-box-shadow': '0 0 20px #000',
                '-moz-box-shadow': '0 0 20px #000',
                '-webkit-box-shadow': '0 0 20px #000'
            });

            var $this = $(this);

            var interval = setInterval(function () {

                $image.hide();
                $loader.show();

                if ($viewpointImage.complete) {
                    clearInterval(interval);
                    $loader.hide();
                    $image.show();
                    $this.mousemove(function (event) {
                        $viewpoint.hide();

                        var vars = {};
                        vars.width2height = $(this).width() / $(this).height();
                        vars.image2viewpoint = $image.width() / $viewpointImage.width;
                        vars.mouse = {};
                        vars.mouse.top = event.pageY - $(this).offset().top;
                        vars.mouse.left = event.pageX - $(this).offset().left;

                        vars.viewpoint = {};
                        vars.viewpoint.position = {};
                        vars.viewpoint.position.top = vars.mouse.top - $viewpoint.height() / 2;
                        vars.viewpoint.position.left = vars.mouse.left - $viewpoint.width() / 2;
                        vars.viewpoint.image = {};
                        vars.viewpoint.image.top = -vars.mouse.top / vars.image2viewpoint + $viewpoint.height() / 2;
                        vars.viewpoint.image.left = -vars.mouse.left / vars.image2viewpoint + $viewpoint.width() / 2;

                        $viewpoint.css({
                            top: vars.viewpoint.position.top,
                            left: vars.viewpoint.position.left
                        });
                        $viewpoint.css({
                            'background-position': vars.viewpoint.image.left + 'px ' + vars.viewpoint.image.top + 'px'
                        });

                        $viewpoint.show();
                    });
                    $this.mouseout(function () {
                        $viewpoint.hide();
                    });
                }
            }, 50);
        });
    };
})(jQuery);
